<template>
  <span ref="svgBox">
    <svg
      t="1664799826620"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="11009"
      width="25"
      height="25"
    >
      <path
        d="M327.68 645.12c0.54272 0 1.06496 0.04096 1.5872 0.12288l0.8192 0.16384 1.1264 0.33792 0.63488 0.27648c3.23584 1.4336 5.5808 4.49536 6.00064 8.1408L337.92 655.36v122.88a10.24 10.24 0 0 1-20.40832 1.19808L317.44 778.24v-98.19136L212.03968 785.47968a10.24 10.24 0 0 1-15.32928-13.5168l0.84992-0.96256L302.8992 665.6H204.8a10.24 10.24 0 0 1-10.16832-9.04192L194.56 655.36a10.24 10.24 0 0 1 9.04192-10.16832L204.8 645.12h122.88z m491.52 0a10.24 10.24 0 0 1 1.19808 20.40832L819.2 665.6h-98.11968l105.3696 105.40032a10.24 10.24 0 0 1-13.52704 15.32928l-0.96256-0.84992L706.56 680.05888V778.24a10.24 10.24 0 0 1-9.04192 10.16832L696.32 788.48a10.24 10.24 0 0 1-10.16832-9.04192L686.08 778.24V655.36a10.24 10.24 0 0 1 4.9152-8.7552l1.32096-0.65536 0.48128-0.2048 1.11616-0.33792 1.20832-0.21504L696.32 645.12h122.88zM634.88 419.84a10.24 10.24 0 0 1 10.24 10.24v163.84a10.24 10.24 0 0 1-10.24 10.24H389.12a10.24 10.24 0 0 1-10.24-10.24V430.08a10.24 10.24 0 0 1 10.24-10.24z m-10.24 20.48H399.36v143.36h225.28V440.32zM327.68 235.52a10.24 10.24 0 0 1 10.16832 9.04192L337.92 245.76v122.88a10.24 10.24 0 0 1-4.9152 8.7552l-1.32096 0.65536-0.48128 0.2048-1.11616 0.33792-1.20832 0.21504L327.68 378.88H204.8a10.24 10.24 0 0 1-1.19808-20.40832L204.8 358.4h98.11968l-105.3696-105.40032a10.24 10.24 0 0 1 13.52704-15.32928l0.96256 0.84992L317.44 343.94112V245.76a10.24 10.24 0 0 1 9.04192-10.16832L327.68 235.52z m368.64 0a10.24 10.24 0 0 1 10.16832 9.04192L706.56 245.76v98.17088l105.40032-105.41056a10.24 10.24 0 0 1 15.32928 13.5168l-0.84992 0.96256L721.07008 358.4H819.2a10.24 10.24 0 0 1 10.16832 9.04192L829.44 368.64a10.24 10.24 0 0 1-9.04192 10.16832L819.2 378.88l-123.45344-0.02048-1.01376-0.1024-0.8192-0.16384-1.1264-0.33792-0.63488-0.27648a10.20928 10.20928 0 0 1-6.00064-8.1408L686.08 368.64V245.76a10.24 10.24 0 0 1 10.24-10.24z"
        p-id="11010"
        :fill="fill"
      ></path>
    </svg>
  </span>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
  setup () {
    const svgBox = ref()
    const fill = ref('var(--el-text-color-primary)')
    onMounted(() => {
      svgBox.value.addEventListener('mouseenter', () => {
        fill.value = 'var(--textHoverColor)'
      })
      svgBox.value.addEventListener('mouseleave', () => {
        fill.value = 'var(--el-text-color-primary)'
      })
    })

    return {
      svgBox,
      fill
    }
  }
})
</script>

<style lang="scss" scoped></style>
